import React, {useEffect, useState} from 'react';
import {View,} from '@tarojs/components';
import {VirtualWaterfall} from "@tarojs/components-advanced";


import styles from './index.module.scss';
import {allGoods} from "@/app/pages/home/data";
import GoodCard from "@/app/pages/home/GoodCard";

const Index: React.FC = () => {
    const [goods, setGoods] = useState<any>([]);

    useEffect(() => {
        load();
    }, []);

    const load = async () => {
        setGoods(allGoods);
    }
    const Row = React.memo(({data, index}: any) => {
        return (
            <View>
                <GoodCard data={data[index]}></GoodCard>
            </View>
        )
    })

    return (
        <View className={styles.page}>
            <VirtualWaterfall
                height={800}
                width="100%"
                item={Row}
                itemData={goods}
                itemCount={goods.length}
                itemSize={300}
            />
        </View>
    );
};

export default Index;
